<script setup>

import {Delete, Edit} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getGroupData} from "@/api/mock";
import {useRouter} from "vue-router";


const dialogFormVisible = ref(false);
const titleName = ref('')
const groupListData = ref([])
const formData = ref ({
  groupName:'',
  area:'',
  leader:''
})
const importGroup = ()=>{

}
const showAddDialog =(title)=>{
  titleName.value = title
  dialogFormVisible.value = true
}
const getGroupList =()=>{
  getGroupData().then(res=>{
    if (res.status) {
      groupListData.value = res.data.tableData
    }
  })
}
getGroupList()

const router = useRouter()
const Click=()=>{
  router.push('/group/info')
  // console.log('aaa')
  // this.$router.push({path:'/house/list'})
}

const tableData = [
  {
    date:'张小白，张三，李四',
    address: '赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍' ,
  },
  {
    date: '张小白，张三，李四',
    address: '赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍',
  },
  {
    date: '张小白，张三，李四',
    address: '赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍赵宣组介绍',
  },
]


const Data2 = [
  {
    date: '4',
    name: '活动名称4',
    year:'2023',
    address: '主任',
    people:'吕娟',
    add:'派发'
  },
  {
    date: '3',
    name: '活动名称4',
    year:'2023',
    address: '主任',
    people:'吕娟',
    add:'派发'
  },
  {
    date: '2',
    name: '活动名称4',
    year:'2023',
    address: '主任',
    people:'吕娟',
    add:'派发'
  },
  {
    date: '1',
    name: '活动名称4',
    year:'2023',
    address: '主任',
    people:'吕娟',
    add:'派发'
  },
]
//分页条
const pageNum=ref(1)
const pageSize =ref(5)
const total =ref(20)
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>招宣组管理/查看招宣组</span>
      </div>
    </template>
    <el-row>
        <el-col :span="18" style="margin-bottom: 20px">
              <el-table :data="tableData">
                <el-table-column prop="date"  width="180" >
                  <template #default="{row}">
                    组长 <br><span>{{row.date}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="address"  />
              </el-table>
        </el-col>
        <el-col :span="5">
            <div class="erweima" style="float: right">
              <img src="@/assets/er.png" class="erweima-1">
              <div class="erweima-2">分享二维码</div>
            </div>
        </el-col>
    </el-row>
    <!-- 搜索表单1 -->
    <el-form inline>
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">招宣组成员</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">编辑成员</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表1 -->
    <el-table :data="groupListData" style="width: 100%">
      <el-table-column type="index" label="序号" width="70" />
      <el-table-column label="姓名" width="150" prop="groupName"></el-table-column>
      <el-table-column label="工号" width="100" prop="ID"></el-table-column>
      <el-table-column label="所在单位" prop="leader"></el-table-column>
      <el-table-column label="职务" prop="area"></el-table-column>
      <el-table-column label="职称" prop="title"></el-table-column>
      <el-table-column label="籍贯" prop="hometown"></el-table-column>
      <el-table-column label="毕业中学" prop="graduation"></el-table-column>
      <el-table-column label="联系电话" prop="number"></el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!-- 分页条1 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>


    <!-- 搜索表单2 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">招宣组活动发布</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
          <img src="@/assets/倒序.png" class="button3-1">
          <div class="button3-2">时间倒序</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表2 -->
    <el-table :data="Data2" style="width: 100%">
      <el-table-column prop="date" label="序号" width="70" />
      <el-table-column prop="name" label="活动名称" width="180" />
      <el-table-column prop="year" label="招宣年度" width="180" />
      <el-table-column prop="address" label="活动区域" />
      <el-table-column prop="people" label="活动创建人" />
      <el-table-column prop="add" label="活动来源" />
    </el-table>

    <!-- 分页条2 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>



    <!-- 搜索表单3 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">活动总结</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
          <img src="@/assets/倒序.png" class="button3-1">
          <div class="button3-2">时间倒序</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表3 -->
    <el-table :data="Data2" style="width: 100%">
      <el-table-column prop="date" label="序号" width="70" />
      <el-table-column prop="name" label="活动名称" width="180" />
      <el-table-column prop="year" label="招宣年度" width="180" />
      <el-table-column prop="address" label="活动区域" />
      <el-table-column prop="people" label="活动创建人" />
      <el-table-column prop="add" label="活动来源" />
    </el-table>

    <!-- 分页条3 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>


    <!-- 搜索表单4 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">审核活动</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
          <img src="@/assets/倒序.png" class="button3-1">
          <div class="button3-2">时间倒序</div>
        </el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">添加总结</div>
        </el-button>
      </el-form-item>
    </el-form>

    <div class="box1">
      <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
      <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
        报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
      <br>
      <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
    </div>
    <div class="box1">
      <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
      <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
        报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
        报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
      <br>
      <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
    </div>
    <div class="box1">
      <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
      <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
        报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
        报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
      <br>
      <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
    </div>

    <!-- 分页条4 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>


    <!-- 搜索表单5 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <div class="logo1-wenzi">最新动态</div>
      </el-form-item>
      <el-form-item >
        <el-button class="button5-1" type="primary" @click="showAddDialog('添加招宣组')">
          <img src="@/assets/倒序.png" class="button3-1">
          <div class="button5-2">倒序</div>
        </el-button>
        <el-button class="button5-1" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button5-3"><ArrowUp /></el-icon>
          <div class="button5-2">收起</div>
        </el-button>
      </el-form-item>
    </el-form>

    <el-row >
      <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
        <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
        <div style="width: 0;height: 60px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
      </el-col>
      <el-col :span="20">
        <div class="span4">2023-03-24 17:23:35</div>
        <el-row style="margin-top: 20px">
          <el-col :span="1" style="margin-bottom: 20px" class="span5">
            由
          </el-col>
          <el-col :span="2" class="span5-2">
            张三
          </el-col>
          <el-col :span="2" class="span5">发布活动</el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
        <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
        <div style="width: 0;height: 70px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
      </el-col>
      <el-col :span="20">
        <div class="span4">2023-03-24 17:23:35</div>
        <el-row style="height: 20px;margin-top: 5px">
          <el-col :span="1" style="margin-bottom: 20px" class="span5">
            由
          </el-col>
          <el-col :span="2" class="span5-2">
            张三
          </el-col>
          <el-col :span="2" class="span5">发布活动</el-col>
        </el-row>
        <div class="span4-2" style="margin: 10px 0px 20px 0">活动名称活动名称活动名称活动名称活动名称活动名称活动名称</div>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="1" style="margin-bottom: 20px;margin-left: 20px">
        <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
      </el-col>
      <el-col :span="20">
        <div class="span4">2023-03-24 17:23:35</div>
        <el-row >
          <el-col :span="1" style="margin-bottom: 20px" class="span5">
            由
          </el-col>
          <el-col :span="2" class="span5-2">
            张三
          </el-col>
          <el-col :span="2" class="span5">发布活动</el-col>
        </el-row>
      </el-col>
    </el-row>

    <div style="margin-left: 70px;margin-bottom: 10px"><span>修改了</span><span style="color: #266eff;"> 组长</span><span>，旧值为</span><span style="color: #ff8800;">“姓名3”</span><span>，新值为</span><span style="color: #00730f;">“姓名4”</span></div>
    <div style="margin-left: 70px;margin-bottom: 10px"><span>修改了</span><span style="color: #266eff;"> 副组长</span><span>，旧值为</span><span style="color: #ff8800;">“姓名3”</span><span>，新值为</span><span style="color: #00730f;">“姓名4”</span></div>
    <div style="margin-left: 70px"><span>修改了</span><span style="color: #266eff;"> 活动总结</span><span>为：</span></div>
    <div style="width: 1447px;height: 52px;border-radius: 4px;background: #fff;border: 1px solid #fff;" class="span6">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
  </el-card>

  <el-drawer v-model="dialogFormVisible" direction="rtl">
    <template #title>
      <h4>{{titleName}}</h4>
    </template>
    <template #default>
      <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
        <el-form-item label="招宣组" label-width="180"  prop="username">
          <el-input v-model="formData.groupName" autocomplete="off" placeholder="请输入招宣组" />
        </el-form-item>
        <el-form-item label="区域" label-width="180" prop="email">
          <el-input v-model="formData.area" autocomplete="off" placeholder="请输入区域" />
        </el-form-item>
        <el-form-item label="组长" label-width="180" prop="gender">
          <el-input v-model="formData.leader" autocomplete="off" placeholder="请输入组长" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;


  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .button1{
    width: 151px;
    height: 36px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #236cff;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #236cff;
  }
  .button2{
    width: 123px;
    height: 36px;
    border-radius: 5px;
    background: linear-gradient(130.33deg, #31efed 0%, #236cff 100%);
  }
  .button3{
    width: 111px;
    height: 36px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #236cff;
  }
  .erweima{
    width: 100%;
    height: 80%;
    border-radius: 7px;
    background: linear-gradient(136.16deg, #03d1cf 0%, #236cff 100%);
  }
}
.logo1{
  width: 20.53px;
  height: 14.14px;
  background: transparent;
}
.logo1-wenzi{
  font-family: "Source Han Sans SC Bold";
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: left;
  color: #000000d9;
}
.button2-1{
  width: 16px;
  height: 16px;
  background: transparent;
}
.button2-2{
  font-family: "Source Han Sans CN";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #fff;
}

.button3-1{
  width: 16px;
  height: 16px;
  background: transparent;
}
.button3-2{
  font-family: "Source Han Sans CN";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #236cff;
}
.button5-1{
  width: 69px;
  height: 22px;
  border-radius: 11px;
  background: #fff;
  border: 0.5px solid #266eff;
}
.button5-2{
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 12px;
  text-align: right;
  color: #266eff;
}
.button5-3{
  width: 11.88px;
  height: 8.01px;
  color: #266eff;
}
.erweima-1{
  width: 50%;
  height: 80%;
  margin-top: 5%;
  margin-left: 5%;
  background: #000;
}
.erweima-2{
  font-family: "PingFang SC Bold";
  writing-mode: vertical-lr;
  font-weight: 700;
  font-size: 20px;
  margin:15%;
  //text-align: center;
  float: right;
  color: #fff;
}

.box1{
  border-left-color:#236cff;
  border-style: solid;
  border-right-color:#f5f8ff;
  border-top-color:#f5f8ff;
  border-bottom-color:#f5f8ff;
  border-width: 3px;
  margin-top: 20px;
  width: 1571px;
  height: 210px;
  border-radius: 4px;
  background: #f5f8ff;
  //border: 1px solid #f5f8ff ;
}
.span1{
  font-family: "Source Han Sans SC Bold";
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  color: #000000d9;
}
.span3{
  width: 447px;
  height: 28px;
  border-radius: 14px;
  background: #c6d9ff;
  border: 1px solid #c6d9ff;
  font-family: "Source Han Sans SC";
  font-weight: 400;
  font-size: 14px;
  padding-top: 4px;
  text-align: center;
  color: #236cff;
}
.span4{
  font-family: "Source Han Sans SC Medium";
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  color: #000;
}
.span5{
  width: 188px;
  height: 24px;
  background: transparent;
  text-align: center;
}
.span5-2{
  width: 200px;
  height: 24px;
  text-align: center;
  border-radius: 12px;
  background: #bfd4fa;
  margin: 0px 10px;
}
.span4-2{
  font-family: "Source Han Sans SC";
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #6f6f6f;
}
.span6{
  font-family: "Source Han Sans SC Medium";

  font-weight: 500;
  font-size: 16px;
  padding-top: 15px;
  padding-left: 90px;
  color: #6f6f6f;
}
</style>
